<template>
  <div>
    <div class="n-layout-page-header">
      <a-card :bordered="false" title="工作台">
        <a-row>
          <a-col :span="12">
            <div class="flex items-center">
              <div>
                <a-avatar circle :size="64">
                  <img alt="avatar" :src="schoolboy" />
                </a-avatar>
              </div>
              <div>
                <p class="px-4 text-xl">早安，Ah jung，开始您一天的工作吧！</p>
                <p class="px-4 text-gray-400">今日阴转大雨，15℃ - 25℃，出门记得带伞哦。</p>
              </div>
            </div>
          </a-col>
          <a-col :span="12">
            <div class="flex justify-end w-full">
              <div class="flex flex-col justify-center flex-1 text-right">
                <span class="text-secondary">项目数</span>
                <span class="text-2xl">16</span>
              </div>
              <div class="flex flex-col justify-center flex-1 text-right">
                <span class="text-secondary">待办</span>
                <span class="text-2xl">3/15</span>
              </div>
              <div class="flex flex-col justify-center flex-1 text-right">
                <span class="text-secondary">消息</span>
                <span class="text-2xl">35</span>
              </div>
            </div>
          </a-col>
        </a-row>
      </a-card>
    </div>
    <div class="mt-3">
      <a-row :gutter="[12, 12]">
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <a-card :bordered="false" title="项目" :bodyStyle="{ padding: 0 }">
            <div class="flex flex-wrap project-card">
              <a-card class="cursor-pointer project-card-item" hoverable>
                <div class="flex flex-row items-center">
                  <GithubOutlined class="w-10" />
                  <span class="ml-4 text-lg">Github</span>
                </div>
                <div class="flex h-10 mt-2 text-gray-400">
                  是一个面向开源及私有软件项目的托管平台。
                </div>
                <div class="flex h-10 mt-2 text-gray-400"> 开源君，2021-07-04 </div>
              </a-card>
              <a-card class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3" hoverable>
                <div class="flex items-center">
                  <TaobaoCircleOutlined class="w-10" style="color: #42b983" />
                  <span class="ml-4 text-lg">淘宝网</span>
                </div>
                <div class="flex h-10 mt-2 text-gray-400"> 只有你想不到，没有你淘不到 </div>
                <div class="flex h-10 mt-2 text-gray-400"> 购物天地 2021-04-01</div>
              </a-card>
              <a-card class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3" hoverable>
                <div class="flex items-center">
                  <Html5Outlined class="w-10" style="color: #e44c27" />
                  <span class="ml-4 text-lg">Html5</span>
                </div>
                <div class="flex h-10 mt-2 text-gray-400"> HTML5是互联网的下一代标准。 </div>
                <div class="flex h-10 mt-2 text-gray-400"> 撸码也是一种艺术 2021-04-01 </div>
              </a-card>
              <a-card class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3" hoverable>
                <div class="flex items-center">
                  <WeiboCircleOutlined class="w-10" style="color: #dd0031" />
                  <span class="ml-4 text-lg">微博</span>
                </div>
                <div class="flex h-10 mt-2 text-gray-400"> 分享简短实时信息的社交平台。 </div>
                <div class="flex h-10 mt-2 text-gray-400"> 分享君 2021-07-04。 </div>
              </a-card>
              <a-card class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3" hoverable>
                <div class="flex items-center">
                  <QqOutlined class="w-10" style="color: #61dafb" />
                  <span class="ml-4 text-lg">腾讯QQ</span>
                </div>
                <div class="flex h-10 mt-2 text-gray-400"> 一款基于互联网的即时通信软件。 </div>
                <div class="flex h-10 mt-2 text-gray-400"> 00后天地 2021-07-04。 </div>
              </a-card>
              <a-card class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3" hoverable>
                <div class="flex items-center">
                  <AlipayCircleOutlined class="w-10" style="color: #61dafb" />
                  <span class="ml-4 text-lg">支付宝</span>
                </div>
                <div class="flex h-10 mt-2 text-gray-400">
                  致力于为企业和个人提供，简单、安全、快速、支付解决方案。
                </div>
                <div class="flex h-10 mt-2 text-gray-400"> 支付工具 2021-07-04 </div>
              </a-card>
            </div>
          </a-card>

          <a-card
            :bodyStyle="{ 'padding-top': 0, 'padding-bottom': 0 }"
            :bordered="false"
            title="动态"
            class="mt-3"
          >
            <template #header-extra><a href="javascript:;">更多</a></template>
            <a-list :bordered="false" split>
              <a-list-item v-for="(item, index) in dynamicList" :key="index">
                <a-list-item-meta :description="item.date">
                  <template #title>
                    {{ item.title }}
                  </template>
                  <template #avatar>
                    <a-avatar circle :size="40">
                      <img alt="avatar" :src="schoolboy" />
                    </a-avatar>
                  </template>
                </a-list-item-meta>
              </a-list-item>
            </a-list>
          </a-card>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <a-card
            :segmented="{ content: 'hard' }"
            :bodyStyle="{ padding: 0 }"
            :bordered="false"
            title="快捷操作"
          >
            <div class="flex flex-wrap project-card">
              <a-card size="small" class="cursor-pointer project-card-item" hoverable>
                <div class="flex flex-col justify-center text-gray-500">
                  <span class="text-center">
                    <DashboardOutlined class="w-8" style="color: #68c755" />
                  </span>
                  <span class="text-center text-lx">主控台</span>
                </div>
              </a-card>
              <a-card size="small" class="cursor-pointer project-card-item" hoverable>
                <div class="flex flex-col justify-center text-gray-500">
                  <span class="text-center">
                    <ProfileOutlined class="w-8" style="color: #fab251" />
                  </span>
                  <span class="text-center text-lx">列表</span>
                </div>
              </a-card>
              <a-card size="small" class="cursor-pointer project-card-item" hoverable>
                <div class="flex flex-col justify-center text-gray-500">
                  <span class="text-center">
                    <FileProtectOutlined class="w-8" style="color: #1890ff" />
                  </span>
                  <span class="text-center text-lx">表单</span>
                </div>
              </a-card>
              <a-card size="small" class="cursor-pointer project-card-item" hoverable>
                <div class="flex flex-col justify-center text-gray-500">
                  <span class="text-center">
                    <ApartmentOutlined class="w-8" style="color: #f06b96" />
                  </span>
                  <span class="text-center text-lx">权限管理</span>
                </div>
              </a-card>
              <a-card size="small" class="cursor-pointer project-card-item" hoverable>
                <div class="flex flex-col justify-center text-gray-500">
                  <span class="text-center">
                    <SettingOutlined class="w-8" style="color: #7238d1" />
                  </span>
                  <span class="text-center text-lx">系统管理</span>
                </div>
              </a-card>
              <a-card size="small" class="cursor-pointer project-card-item" hoverable>
                <div class="flex flex-col justify-center text-gray-500">
                  <span class="text-center">
                    <MailOutlined class="w-8" style="color: #5cdbd3" />
                  </span>
                  <span class="text-center text-lx">消息</span>
                </div>
              </a-card>
            </div>
          </a-card>
          <a-card
            :segmented="{ content: 'hard' }"
            :bordered="false"
            size="small"
            class="pt-4 pb-3 mt-3"
          >
            <img src="~@/assets/images/Business.svg" class="w-full" />
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import schoolboy from '@/assets/images/schoolboy.png';
  import {
    GithubOutlined,
    DashboardOutlined,
    ProfileOutlined,
    FileProtectOutlined,
    SettingOutlined,
    ApartmentOutlined,
    Html5Outlined,
    MailOutlined,
    TaobaoCircleOutlined,
    WeiboCircleOutlined,
    QqOutlined,
    AlipayCircleOutlined,
  } from '@vicons/antd';

  const dynamicList = [
    {
      title: 'Ah Jung 刚才把工作台页面随便写了一些，凑合能看了！',
      date: '2021-07-04 22:37:16',
    },
    {
      title: 'Ah Jung 在 开源组 创建了项目 naive-ui-admin？',
      date: '2021-07-04 09:37:16',
    },
    {
      title: '@风清扬，向naive-ui-admin提交了一个bug，抽时间看看吧！',
      date: '2021-07-04 22:37:16',
    },
    {
      title: '技术部那几位童鞋，再次警告，不要摸鱼，不要摸鱼，不要摸鱼啦！',
      date: '2021-07-04 09:37:16',
    },
    {
      title: '上班不摸鱼，和咸鱼有什么区别（这话真不是我说的哈）！',
      date: '2021-07-04 20:37:16',
    },
  ];
</script>

<style lang="less" scoped>
  .project-card {
    &-item {
      width: 33.333333%;
      border: none;
      border-radius: inherit;
      border-right: 1px solid var(--color-neutral-3);
      border-bottom: 1px solid var(--color-neutral-3);
      &:nth-child(3n) {
        border-right: none;
      }
      &:nth-child(n + 4) {
        border-bottom: none;
      }
    }
  }

  .arco-list-header,
  .arco-list-item:not(:last-child) {
    border-bottom: 1px solid var(--color-neutral-3);
  }
</style>
